<!DOCTYPE html>
<html>
<body>
<h2>LOGIN</h2>
<button type="button" onclick="onListClicked()">List</button><br>
<button id="prev" type="button" onclick="onPrevClicked()">Prev</button><br>
<button id="next" type="button" onclick="onNextClicked()">Next</button><br>
<ul id="demo">

</ul>
<script>

window.page = 0;
window.total = 0;
window.pageSize = 2;

function post(options){
    var data = options.data;
    var callback = options.onSucceed;
    var http = new XMLHttpRequest();
    http.onload = function(){
        var json = JSON.parse(this.responseText);
        callback && callback(json);
    }
    http.open("POST", options.url, true)
    http.send(JSON.stringify(data));
}

function output(articles){
    var html = "";
    for(var i in articles){
        var a = articles[i];
        var li = "<li><strong>" + a.ctime + "</strong><i>" + a.title + "</i></li>"
        html += li;
    }
    document.getElementById("demo").innerHTML = html;
}

function list(page){
    post({
      data:{pi:page, ps:pageSize},
      url:"http://wx.taoke93.com:8100/api/anouce/list",
      onSucceed:function(d){
        if(d.stat != "ok")
            return;
        window.page = page;
        window.total = d.total;
        document.getElementById("prev").disabled = page <= 0;
        document.getElementById("next").disabled = page >= (Math.ceil(d.total/pageSize)-1);
        output(d.ret);    
      }
    });
}

function onListClicked(){
  list(window.page);
}

function onPrevClicked(){
    if(window.page <= 0){
        alert("prev");
        return;
    }

    list(window.page-1);
}

function onNextClicked(){
    if(window.page >= (Math.ceil(window.total / window.pageSize)-1)){
        alert("prev");
        return;
    }

    list(window.page+1);
}

</script>

</body>
</html>
